<template>
  <div id="globalSider">
    <a-layout-sider v-if="loginUserStore.loginUser?.id"
                    class="sider"
                    width="200"
                    breakpoint="lg"
    >
      <a-menu
        mode="inline"
        v-model:selectedKeys="current"
        :items="menuItems"
        @click="doMenuClick"
      />
    </a-layout-sider>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, watch } from 'vue'
import { useRouter, useRoute } from "vue-router";
import { PictureOutlined, UserOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'

const loginUserStore = useLoginUserStore()
const router = useRouter()
const route = useRoute()

// 菜单列表
const menuItems = [
  { key: '/', label: '公共图库', icon: () => h(PictureOutlined) },
  { key: '/my_space', label: '我的空间', icon: () => h(UserOutlined) },
]

// 路由跳转事件
const doMenuClick = ({ key }: { key: string }) => {
  router.push({ path: key });
};

// 当前选中菜单
const current = ref<string[]>([route.path])

// 监听路由变化，更新当前选中菜单
watch(() => route.path, (newPath) => {
  current.value = [newPath]
})
</script>

